.redbox {
    width: 400px;
    height: 650px;
    border: inset #b31818 3px;
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    background: #d00a0a;
}

.box1 {
    position: relative;
    margin-top: 80px;
    height: 570px;
}

.statbox {
    background-color: #e61515;
    width: 800px;
    margin: 0 auto;
    padding: 1em;
    border-radius: 15px;
    border: double black 10px;
    display: flex;
    position: relative;
}

.statbox:after {
    content: "";
    position: absolute;
    margin-left: 205px;
    margin-top: 21px;
    width: 124px;
    height: 60px;
    border-top: inset #b31818 3px;
    border-right: inset #b31818 3px;
    border-radius: 3px;
    background-color: #d00a0a;
}

.stylefix {
    position: relative;
}

.stylefix::after {
    border-left: inset #b31818 3px;
    border-radius: 3px;
    content: "";
    position: absolute;
    margin-left: 100px;
    margin-top: -5px;
    width: 200px;
    height: 120px;
    transform: rotate(60deg);
    background-color: #d00a0a;
}

.smalldesc {
    position: absolute;
    font-size: 8px;
    letter-spacing: 0;
    bottom: 0;
    left: 0;
    height: 100px;
    width: 200px;
    box-sizing: border-box;
    margin: 8px;
    background: linear-gradient(15deg, #8191cc 64%, #b7badc 70%, #b7badc 81%, #fff 86%, #b7badc 89%, #b7badc 100%);
    padding-left: 4px;
    border-radius: 8px;
    font-family: "pokemon-font";
    border: inset #656f9a 3px;
}

.buttonElement {
    position: absolute;
    margin: 5px;
    margin-bottom: 10px;
    bottom: 0;
    right: 0;
}

.separador {
    display: flex;
    flex-direction: column;
    width: 50px;
    margin: 0 20px;
    align-items: center;
    border: inset #460f0f 4px;
    border-radius: 4px;
    background: #460f0f;
    margin-top: -25px;
    margin-bottom: -25px;
}

.separador>* {
    border-radius: 4px;
    border: solid #2d0d0d 2px;
}

.ponta:first-child {
    border-radius: 0 0 5px 5px;
    border-top: none;
}

.ponta {
    background: linear-gradient(90deg, #460f0f 0, #891313 30%, #b31818 45%, #fd5555 65%, #b31818 95%);
    border-top-color: #891313;
    border-right-color: #b31818;
    flex: 1;
    width: 95%;
}

.meio {
    background: linear-gradient(90deg, #891313 0, #b31818 30%, #e61515 45%, #fd5555 65%, #e61515 95%);
    border-right-color: #fd5555;
    border-top-color: #fd5555;
    flex: 10;
    width: 100%;
    border-left-color: #5f1010;
}

.ponta:last-child {
    border-radius: 5px 5px 0 0;
}

.bluebutton {
    padding: 5px;
    width: 61px;
    height: 61px;
    border-radius: 50%;
    border: outset rgb(248, 187, 187) 6px;
    transform: rotate(60deg);
    background: radial-gradient( circle farthest-corner at 40% 25%, rgb(218, 237, 241) 9%, rgb(124, 214, 237) 20%, rgb(64, 90, 165) 62%, rgb(43, 125, 196) 100%);
    position: absolute;
}

.bluebutton:after {
    position: absolute;
    border: groove #460f0f 5px;
    content: "";
    width: 60px;
    height: 60px;
    position: absolute;
    border-radius: 50%;
    left: -10px;
    top: -10px;
    border-style: double;
    opacity: 0.75;
}

.nameIDsprite {
    background: #9a9a9a;
    border: inset #6b6a6a 3px;
    border-radius: 5px;
    border-left-width: 0px;
    border-bottom-width: 0px;
    width: 250px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 40px;
    position: relative;
    overflow: hidden;
    margin: 20px auto;
}

.nameIDsprite:after {
    content: "";
    position: absolute;
    margin: -50px;
    margin-top: 10px;
    width: 80px;
    height: 80px;
    transform: rotate(45deg);
    background-color: #d00a0a;
}

.pokenameID {
    display: block;
    float: left;
}

.pokename {
    text-transform: capitalize;
    /*background-image: url("../gallery/gback.jpg");*/
    margin: 1px;
    margin-left: 18px;
    position: absolute;
    left: 0;
}

.pokeID {
    margin: 1px;
    margin-right: 18px;
    position: absolute;
    right: 0;
}

.pokenameID {
    margin-bottom: 10px;
    background: linear-gradient( 14deg, rgb(165, 205, 83) 60%, rgb(193, 217, 144) 65%);
    width: 228px;
    height: 30px;
    font-size: 13px;
    padding-left: 5px;
    padding-right: 5px;
    border: inset #879a65 3px;
}

.sprite {
    width: 100%;
    display: flex;
    image-rendering: pixelated;
    border: inset #9aa28b 3px;
    border-radius: 5px;
    margin: 10px 0;
    box-sizing: border-box;
    background: linear-gradient(15deg, #8191cc 64%, #b7badc 70%, #b7badc 81%, #fff 86%, #b7badc 89%, #b7badc 100%);
}

.poketype1 {
    border: groove #757575 3px;
    border-radius: 5px;
    float: left;
    height: 70px;
    padding-top: 5px;
    background: #2f2e2e;
}

.poketype2 {
    border: groove #757575 3px;
    border-radius: 5px;
    height: 70px;
    padding-top: 5px;
    margin-left: 20px;
    float: left;
    background: #2f2e2e;
}

.typewrap {
    text-align: center;
    margin: auto;
}

.buttoncross {
    width: 105px;
    height: 105px;
    margin: 0 auto;
    padding: 35px;
}

.crossCenter {
    background-color: #333333;
    width: 35px;
    height: 35px;
}

.crossCircle {
    background-color: #292929;
    width: 25px;
    height: 25px;
    position: absolute;
    border-radius: 100%;
    margin-top: 5px;
    margin-left: 5px;
}

.crossTop {
    cursor: pointer;
    line-height: 35px;
    text-align: center;
    background-color: #333333;
    width: 35px;
    height: 35px;
    position: absolute;
    border-radius: 15%;
    margin-top: -30px;
}

.crossBottom {
    cursor: pointer;
    line-height: 35px;
    text-align: center;
    background-color: #333333;
    width: 35px;
    height: 35px;
    position: absolute;
    border-radius: 15%;
    margin-top: 30px;
}

.crossLeft {
    cursor: pointer;
    line-height: 35px;
    text-align: center;
    background-color: #333333;
    width: 35px;
    height: 35px;
    position: absolute;
    border-radius: 15%;
    margin-left: -30px;
}

.crossRight {
    cursor: pointer;
    line-height: 35px;
    text-align: center;
    background-color: #333333;
    width: 35px;
    height: 35px;
    position: absolute;
    border-radius: 15%;
    margin-left: 30px;
}

.type {
    color: rgba(0, 0, 0, 0.9);
    text-transform: capitalize;
    font-size: 1.25em;
    padding: 2px;
    margin: 2px;
    height: 31px;
    border: groove #757575 3px;
    border-radius: 10px;
    font-size: 12px;
    width: 120px;
    text-align: center;
    letter-spacing: 2px;
    text-shadow: rgba(255, 255, 255, 0.3) -1px 1px;
    align-self: center;
    background: linear-gradient( 15deg, rgba(128, 128, 128, 0.5) 64%, rgba(138, 138, 138, 0.5) 70%, rgba(230, 230, 230, 0.5) 81%, rgba(255, 255, 255, 0.5) 86%, rgba(220, 220, 220, 0.5) 89%, rgba(230, 230, 230, 0.5) 100%);
    background-blend-mode: hard-light;
}

p[name="normal"] {
    background-color: #bfbfbf;
}

p[name="fighting"] {
    background-color: #d87c58;
}

p[name="flying"] {
    background-color: #999ade;
}

p[name="poison"] {
    background-color: #925192;
}

p[name="ground"] {
    background-color: #dea761;
}

p[name="rock"] {
    background-color: #897864;
}

p[name="bug"] {
    background-color: #b1c967;
}

p[name="ghost"] {
    background-color: #c195dc;
}

p[name="steel"] {
    background-color: #49769c;
}

p[name="fire"] {
    background-color: #cf1414;
}

p[name="water"] {
    background-color: #1689de;
}

p[name="grass"] {
    background-color: #47a047;
}

p[name="electric"] {
    background-color: #e6b700;
}

p[name="psychic"] {
    background-color: #fa43b8;
}

p[name="ice"] {
    background-color: #98c3de;
}

p[name="dragon"] {
    background-color: #89315d;
}

p[name="dark"] {
    background-color: #282433;
}

p[name="fairy"] {
    background-color: #dca0ce;
}

p[name="unknown"] {
    background-color: #545454;
}

p[name="shadow"] {
    background-color: #364163;
}

.arrow {
    border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
}

.right {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.left {
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}

.up {
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
}

.down {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.pressed {
    box-shadow: 0 9px #999;
}

.pressed:active {
    box-shadow: 0 5px #666;
    transform: translateY(4px);
}

.crossTop:active {
    transform: translateY(4px);
}

.pressed:hover {
    background-color: #232323;
}

.crossTop:hover {
    background-color: #232323;
}

.linedec {
    width: 70px;
    height: 4px;
    background-color: #272727;
    border-bottom: 2px solid #505050;
    margin-bottom: 5px;
    border-radius: 4px;
}

.decorationlines {
    position: absolute;
    margin-right: 30px;
    right: 0;
}

.redbutton {
    background: radial-gradient( circle farthest-corner at 40% 25%, rgb(236, 85, 85) 9%, rgb(236, 85, 85) 20%, rgb(193, 11, 11) 62%, rgb(165, 1, 1) 100%);
    width: 30px;
    height: 30px;
    border: 3px solid #383838;
    border-radius: 50%;
    position: absolute;
    margin-left: 35px;
}

.smallbutton {
    background: radial-gradient( circle farthest-corner at 40% 25%, rgb(230, 148, 148) 9%, rgb(236, 46, 46) 20%, rgb(224, 13, 13) 62%, rgb(144, 1, 1) 100%);
    width: 20px;
    height: 20px;
    border: 2px solid #383838;
    border-radius: 50%;
    position: absolute;
    margin-left: 70px;
    transform: rotate(60deg);
}

.byel {
    background: radial-gradient( circle farthest-corner at 40% 25%, rgb(230, 222, 148) 9%, rgb(236, 220, 46) 20%, rgb(224, 206, 13) 62%, rgb(144, 144, 1) 100%);
    margin-left: 100px;
}

.bgre {
    background: radial-gradient( circle farthest-corner at 40% 25%, rgb(148, 230, 152) 9%, rgb(46, 236, 71) 20%, rgb(34, 224, 13) 62%, rgb(1, 144, 25) 100%);
    margin-left: 130px;
}

.shinybt {
    cursor: pointer;
    user-select: none;
    color: rgba(0, 0, 0, 0.9);
    text-transform: capitalize;
    font-size: 1.25em;
    padding: 2px;
    margin: 2px;
    border: groove #757575 3px;
    border-radius: 10px;
    font-size: 15px;
    width: 150px;
    text-align: center;
    letter-spacing: 2px;
    text-shadow: rgba(255, 255, 255, 0.3) -1px 1px;
    align-self: center;
    background-blend-mode: hard-light;
    background: linear-gradient(14deg, #bf8823 10%, #ffee90 25%, #e6a617 47%, #ffee90 73%, #fff6c8 74%, #ffee90 80%);
    position: absolute;
    margin-left: 8px;
}

.backbt {
    cursor: pointer;
    user-select: none;
    color: rgba(0, 0, 0, 0.9);
    text-transform: capitalize;
    font-size: 1.25em;
    padding: 2px;
    margin: 2px;
    border: groove #757575 3px;
    border-radius: 10px;
    font-size: 15px;
    width: 150px;
    text-align: center;
    letter-spacing: 2px;
    text-shadow: rgba(255, 255, 255, 0.3) -1px 1px;
    align-self: center;
    background: linear-gradient(14deg, #21c121 10%, #8ffb8f 25%, #17e617 47%, #8cf58c 73%, #c4f7c4 74%, #91ff91 80%);
    background-blend-mode: hard-light;
    position: absolute;
    right: 0;
    margin-right: 8px;
}

.backbt.pressed {
    box-shadow: 0 9px #318635;
}

.shinybt.pressed {
    box-shadow: 0 9px #a0a01b;
}

.backbt:active {
    box-shadow: 0 5px #173e19;
}

.shinybt:active {
    box-shadow: 0 5px #46460c;
}

.statscreen {
    font-size: 8px;
    padding: 5px;
    padding-bottom: 10px;
    padding-top: 10px;
    background: linear-gradient(15deg, #8191cc 64%, #b7badc 70%, #b7badc 81%, #fff 86%, #b7badc 89%, #b7badc 100%);
    border-radius: 3px;
    border: inset #656f9a 3px;
    width: 200px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 5px;
    flex: 1;
}

.statslinha {
    text-transform: capitalize;
}

.leftprimeiralinha {
    display: flex;
    border-bottom: groove #757575 3px;
}

.containerbarras {
    padding: 5px;
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    border-left: groove #757575 3px;
    flex: 1;
}

.contb {
    background-color: #ddd;
    border: inset #b31818 3px;
    border-radius: 3px;
    margin-bottom: 1px;
}

.barrastats {
    border-right: 1px solid #2d2d2d;
    padding: 2px;
    color: white;
}

.barra0 {
    width: 90%;
    background-color: #ef0202;
}

.barra1 {
    width: 80%;
    background-color: #ff5722;
}

.barra2 {
    width: 65%;
    background-color: #e8d105;
}

.barra3 {
    width: 65%;
    background-color: #3f51b5;
}

.barra4 {
    width: 65%;
    background-color: #4caf50;
}

.barra5 {
    width: 65%;
    background-color: #e91e63;
}

.flavorscreen {
    line-height: 1.6;
    font-size: 9px;
    padding: 5px;
    background: linear-gradient(15deg, #8191cc 64%, #b7badc 70%, #b7badc 81%, #fff 86%, #b7badc 89%, #b7badc 100%);
    border-radius: 3px;
    border: inset #656f9a 3px;
    width: auto;
    height: 100px;
    border-radius: 8px;
    justify-content: center;
    margin: 20px;
}

.bluebtcont {
    display: flex;
    border-bottom: groove #757575 3px;
    justify-content: space-evenly;
    flex-wrap: wrap;
    padding: 5px;
}

.blue-button {
    height: 40px;
    flex: 1 1 16%;
    margin: 3px;
    border: groove #6c96e6 3px;
    border-radius: 5px;
    background: linear-gradient( 15deg, rgba(128, 128, 128, 0.5) 64%, rgba(138, 138, 138, 0.5) 70%, rgba(230, 230, 230, 0.5) 81%, rgba(255, 255, 255, 0.5) 86%, rgba(220, 220, 220, 0.5) 89%, rgba(230, 230, 230, 0.5) 100%);
    background-blend-mode: hard-light;
    background-color: #09a8ff;
}

.movecont {
    display: flex;
    width: 257px;
    height: 87px;
    justify-content: space-between;
    padding: 10px 15px;
    background: linear-gradient(15deg, #8191cc 64%, #b7badc 70%, #b7badc 81%, #fff 86%, #b7badc 89%, #b7badc 100%);
    border-radius: 8px;
    border: inset #656f9a 3px;
}

.move-name {
    font-size: 10px;
    border-bottom: solid black 2px;
    margin-bottom: 3px;
    text-align: center;
    text-transform: capitalize;
}

.move-stat {
    margin-right: 3px;
    margin-top: 3px;
}

.move-type {
    text-transform: uppercase;
    border: solid black 2px;
    border-radius: 7px;
    padding: 2px 10px;
    text-align: center;
}

.move-learn {
    float: right;
    margin-right: 3px;
}

.leftbox {
    font-size: 8px;
}

.rightbox {
    margin-left: 10px;
    font-size: 8px;
}

.movenumbercont {
    margin: 10px;
    display: flex;
    justify-content: center;
}

.movenumber {
    width: 40px;
    height: 35px;
    text-align: center;
    background: linear-gradient( 14deg, rgb(165, 205, 83) 60%, rgb(193, 217, 144) 65%);
    border-radius: 10px;
    border: inset #879a65 3px;
}

.movecomlumn {
    margin-left: auto;
}

.moveb {
    cursor: pointer;
    font-size: 10px;
    padding-top: 10px;
    text-align: center;
    background: radial-gradient( circle farthest-corner at 40% 25%, rgb(148, 230, 152) 9%, rgb(46, 236, 71) 20%, rgb(34, 224, 13) 62%, rgb(1, 144, 25) 100%);
    margin-bottom: 10px;
    width: 40px;
    height: 40px;
    border: 3px solid #383838;
    border-radius: 50%;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.boxmove {
    border: groove #757575 3px;
    padding: 5px;
    width: 150px;
    border-radius: 10px;
    margin-left: auto;
    margin-right: 10px;
}

.totalmoves {
    background: linear-gradient( 14deg, rgb(165, 205, 83) 60%, rgb(193, 217, 144) 65%);
    border-radius: 20%;
    width: 50px;
    height: 30px;
    padding: 3px;
    text-align: center;
    float: left;
    border: inset #879a65 3px;
    font-size: 12px;
    margin-top: auto;
    margin-bottom: auto;
}

.moves {
    margin-top: auto;
    margin-bottom: auto;
    text-align: center;
    float: left;
    text-shadow: 0px -1px 0px #561f1f;
}